<template>
  <section class="content animate__animated  animate__fadeInTopLeft">
    <section class="content_title">
      <img src="https://oss.qiacaiba.com/screen/screen/card01_tag01.png">
    </section>
    <el-carousel
      :interval="5000"
      indicator-position="none"
      arrow="never"
      height="420px"
    >
      <el-carousel-item>
        <section class="content_content">
          <section class="leftContent width50">
            <section class="leftContent__title">
              省农科院
            </section>
            <section class="container">
              <div>项目:“双效”湖塘</div>
              <div>原位修复菌剂项目单位:湖北省农科院、黄鳝供应链公司</div>
              <div class="ellipsis-multiline">
                专家:魏志宇，闵勇研发成果:基于农业微生物种质资源库从5000余株功能菌株中筛选评价出一批高效活性菌株。在黄鳝养殖池塘的原位修复中试实验中，显示出显著的底泥、水体的原位修复性能和沉水植物保存活、促生效果。经过两年“双效”湖塘原位修复菌剂修复速度高于市场的研发，同类产品和品相。目前正在开展多场......
              </div>
            </section>
          </section>
          <section class="rightContent width30">
            <section
              style="width: 100%"
              class="flexBox"
            >
              <el-carousel
                :interval="4000"
                type="card"
                height="100px"
                indicator-position="none"
                arrow="never"
                style="width: 100%;"
              >
                <el-carousel-item
                  v-for="i in 6"
                  :key="i"
                  class="topSwiperItem"
                >
                  <el-image
                    class="img"
                    :src="`https://oss.qiacaiba.com/screen/screen/swiper_content0${i}.png`"
                    alt=""
                  />
                </el-carousel-item>
              </el-carousel>
              <section class="swiper_desc">
                在黄鳝养殖池塘的原位修复中试实验中，显示出显著的底泥、水体的原位修复性能和沉水植物保存活、促生效果。
              </section>
            </section>
            <section
              style="width: 100%;"
              class="flexBox"
            >
              <el-carousel
                :interval="4000"
                height="100px"
                indicator-position="none"
                arrow="never"
                style="width:152px;margin: 10px 0;"
              >
                <el-carousel-item
                  v-for="i in 2"
                  :key="i"
                  class="topSwiperItemBox2"
                >
                  <el-image
                    class="img"
                    :src="`https://oss.qiacaiba.com/screen/screen/swiper_content_box0${i}.png`"
                    alt=""
                  />
                </el-carousel-item>
              </el-carousel>
              <section class="swiper_desc">
                养殖池塘原位修复实验一重度污染底泥环境氨氮原位去除率超60%。
              </section>
            </section>
          </section>
        </section>
      </el-carousel-item>
      <el-carousel-item>
        <section class="content_content">
          <section class="leftContent width50">
            <section class="leftContent__title">
              国药集团
            </section>
            <section class="container">
              <div>项自:针对鳝鱼弹状病毒的浸泡疫苗、单克隆抗体研发项目</div>
              <div>单位:国药集团动物保健股份有限公司、黄鳝供应链公司</div>
              <div class="ellipsis-multiline">
                专家:胡玉立、喻亚雄研发成果:现已成功从病鱼体内分离到弹状病毒，并在实验室条件下利用PCR快速检测，成功建立弹状病毒检测、鉴定方法。利用电子显微镜，对弹状病毒结构进行分析，为下一步确定抗原打下基础，下一步，将开展鳝鱼弹......
              </div>
            </section>
          </section>
          <section class="rightContent width20">
            <section
              style="width: 100%"
              class="flexBox"
            >
              <section class="imgBox">
                <el-image
                  class="img"
                  src="https://oss.qiacaiba.com/screen/screen/content_001.png"
                  alt=""
                  :preview-src-list="['https://oss.qiacaiba.com/screen/screen/content_001.png']"
                />
              </section>
              <section class="swiper_desc marTp20">
                黄鳝弹状病毒的电泳结果
              </section>
            </section>
            <section
              style="width: 100%;"
              class="flexBox"
            >
              <section class="imgBox">
                <el-image
                  class="img"
                  src="https://oss.qiacaiba.com/screen/screen/content_002.png"
                  alt=""
                  :preview-src-list="['https://oss.qiacaiba.com/screen/screen/content_002.png']"
                />
              </section>
              <section class="swiper_desc marTp20">
                鳝鱼弹状病毒电镜照片
              </section>
            </section>
          </section>
        </section>
      </el-carousel-item>
    </el-carousel>
    <el-carousel
      :interval="5000"
      indicator-position="none"
      arrow="never"
      height="420px"
    >
      <el-carousel-item>
        <section class="content_content">
          <section class="leftContent width50">
            <section class="leftContent__title">
              太空微藻
            </section>
            <section class="container">
              <div>项目：黄鳝健康养殖：益生菌“减抗替抗”产品创制与示范项目</div>
              <div>单位：深圳太空微藻生物科技有限公司、仙桃黄鳝供应链公司</div>
              <div class="ellipsis-multiline">
                专家：彭义雄 研发成果：在张沟镇先锋村黄鳝养殖示范基地目前已开展6次试验示范。三次重复试验发现液体菌剂拌饲料和网箱泼洒相结合方式效果最佳，一方面实现了抗生素的零使用，同时水体中氨氮从0.80mg/L下降至0.10mg/L以下，减少了氨氮对黄鳝的毒害作用，应用面积已经达到1000个网箱/次，得到养殖户的一致好评。目前生物防治小试使用成本较传统抗生素防治方法有所增加......
              </div>
            </section>
          </section>
          <section class="rightContent width20">
            <section
              style="width: 100%"
              class="flexBox"
            >
              <section class="imgBox">
                <el-image
                  class="img"
                  src="https://oss.qiacaiba.com/screen/screen/content003.png"
                  alt=""
                  :preview-src-list="['https://oss.qiacaiba.com/screen/screen/content003.png']"
                />
              </section>
              <section class="swiper_desc marTp20">
                恩诺沙星药物代谢对比实验
              </section>
            </section>
          </section>
        </section>
      </el-carousel-item>
      <el-carousel-item>
        <section class="content_content">
          <section class="leftContent width50">
            <section class="leftContent__title">
              兆亮生物
            </section>
            <section class="container">
              <div>项目：替代鱼浆的功能性黄鳝诱食料项目</div>
              <div>
                单位：湖北兆亮生物科技有限公司、黄鳝供应链公司
              </div>
              <div class="ellipsis-multiline">
                专家：付雄 研发成果：根据黄鳝营养需求，结合白鲢及冰冻海杂鱼营养成分分析，研发替代鱼浆的幼苗营养全面的生物配合饲料。结合黄鳝养殖过程中容易出现的问题，筛选出相对应的功能性添加剂，通过不断地筛选和配比研发出“黄鳝营养+”替代鱼浆功能性黄鳝诱食料。使用“黄鳝营养+”每个网箱投喂成本200-250元......
              </div>
            </section>
          </section>
          <section class="rightContent width20">
            <section
              style="width: 100%;"
              class="flexBox"
            >
              <section class="imgBox">
                <el-image
                  class="img"
                  src="https://oss.qiacaiba.com/screen/screen/content004.png"
                  alt=""
                  :preview-src-list="['https://oss.qiacaiba.com/screen/screen/content004.png']"
                />
              </section>
              <section class="swiper_desc marTp20">
                兆亮替代鱼浆“黄鳝营养+”
              </section>
            </section>
          </section>
        </section>
      </el-carousel-item>
    </el-carousel>
  </section>
</template>
<script setup lang="ts">

</script>

<style scoped lang="scss">
.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;    /* 限制最多显示3行 */
  overflow: hidden;
  text-overflow: ellipsis;  /* 可选，部分浏览器不生效 */
  word-break: break-word;
}

.flexBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.marTp20 {
  margin: 10px 0;
}

.content {
  width: 720px;

  .content_title {
    display: flex;
    justify-content: center;
    img {
      display: block;
      width: 231px;
      height: 56px;
    }
  }

  .content_content {
    width: 100%;
    height: 400px;
    background-image: url("https://oss.qiacaiba.com/screen/screen/centerDetailBg.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 13px;
    padding: 17px 30px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .leftContent {
      &.width50 {
        width: 60%;
      }
    }

    .rightContent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &.width30 {
        width: 39%;
      }

      &.width20 {
        width: 32%;
      }

      .imgBox {
        width: 156px;
        height: 130px;

        .img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .swiper_desc {
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 500;
        color: #08FBFF;
        line-height: 23px;
      }

      .topSwiperItem {
        width: 120px;
        height: 80px;

        .img {
          display: block;
          width: 120px;
          height: 80px;
        }
      }

      .topSwiperItemBox2 {
        width: 156px;
        height: 130px;

        .img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    .leftContent__title {
      font-family: Source Han Sans;
      font-weight: 500;
      font-size: 28px;
      font-variation-settings: "opsz" auto;
      color: #08FBFF;

    }

    .container {
      margin-top: 10px;
      font-family: Source Han Sans;
      font-weight: 500;
      font-size: 20px;
      font-variation-settings: "opsz" auto;
      color: #fff;
      line-height: 30px;
      text-align: justify;

    }
  }
}
</style>
